<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html>

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>BookMarket Online</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
<link rel="stylesheet" type="text/css" href="assets/css/common.css" />
<link rel="stylesheet" type="text/css" href="assets/css/style2.css" />
<link rel="stylesheet" type="text/css" href="assets/css/style.css">


<style id="holderjs-style" type="text/css">
.holderjs-fluid {
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	font-family: sans-serif;
	margin: 0
}
</style>
</head>
<body>
	<header class="container">
		<div class="row">
			<div class="span3 logo">
				<img src="assets/img/logo_lector.jpg" width="180" />
			</div>
			<div id="headerText" class="span7">
				<h1 class="featurette-heading" style="color: #0070b8;">
					<a href="#">BookMarket Online</a>
				</h1>
				<div id="subtext">
					<span class="muted" style="font-size: 20px; color: #678BC7;"><s:property value="%{getText('index.mensaje')}"/></span>
				</div>
			</div>
		</div>
	</header>


	<div class="container">
		<div class="featurette">

			<section class="row">
				<div class="span8">
					<h2 class="featurette-heading"><s:property value="%{getText('index.bienvenido')}"/></h2>


					<div id="myModal" class="modal hide fade" tabindex="-1"
						role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">



					</div>

					<div id="myModalReg" class="modal hide fade" tabindex="-1"
						role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

						<div class="modal-body">


							<div style="margin-top: 10px;"></div>
							<div class="modal-footer"></div>
						</div>
					</div>

				</div>
		</div>
		</section>

		<hr class="featurette-divider">
		<!-- TEXTO CONTENIDO -->
		<section class="row">
			<div class="span12">
				<span><s:property value="%{getText('index.menbi')}"/></span>
			</div>
		</section>


		<section class="row space-content">
			<ul id="myTab" class="nav nav-tabs">
				<li class="active"><a href="#novedades" data-toggle="tab">Login</a></li>
				<li><a href="#developers" data-toggle="tab"><s:property value="%{getText('index.integrantes')}"/></a></li>

			</ul>

			<div class="tab-content">
				<div id="novedades" class="tab-pane fade in active">
					<div class="span6">

						<div class="hero-unit">
							<div class="container">
								<section class="row">

									<s:form action="login" id="">
										<s:label value="%{getText('login.labelusuario')}"></s:label>
										<s:textfield name="usuario.cuenta"></s:textfield>
										<s:label value="%{getText('login.labelclave')}"></s:label>
										<s:password name="usuario.clave"></s:password>
										<s:submit value="%{getText('index.btnentrar')}"></s:submit>
									</s:form>
									<s:property value="mensaje" />


								</section>
							</div>
						</div>

					</div>
					<div id="myCarousel" class="carousel slide span6">
						<ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1" class=""></li>
							<li data-target="#myCarousel" data-slide-to="2" class=""></li>
						</ol>

						<div class="carousel-inner">
							<div class="item active">
								<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
								<div class="carousel-caption">Grandes Ofertas</div>
							</div>
							<div class="item">
								<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
								<div class="carousel-caption"></div>
							</div>
							<div class="item">
								<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
								<div class="carousel-caption"></div>
							</div>
						</div>
						<a class="left carousel-control" href="#myCarousel"
							data-slide="prev">‹</a> <a class="right carousel-control"
							href="#myCarousel" data-slide="next">›</a>
					</div>
				</div>
				<div id="developers" class="tab-pane fade row">


					<div class="span9" style="margin-left: 250px">
						<h3>GRUPO 1</h3>
						<p>Cindy Cueva</p>
						<p>Jacky</p>
						<p>Luis Bando</p>
						<p>Luis Mejia</p>
						<p>Geferson Pillaca</p>
					</div>

				</div>

			</div>
		</section>

		<hr class="featurette-divider">
	</div>


	<!-- FOOTER -->
	<footer>
		<div style="margin-left: 50px">
			<img src="assets/img/footer.png"><br>
			<p class="text-info">
				<b>By GRUPO 1</b>
			</p>
		</div>
	</footer>


	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap-transition.js"></script>
	<script src="assets/js/bootstrap-alert.js"></script>
	<script src="assets/js/bootstrap-modal.js"></script>
	<script src="assets/js/bootstrap-dropdown.js"></script>
	<script src="assets/js/bootstrap-scrollspy.js"></script>
	<script src="assets/js/bootstrap-tab.js"></script>
	<script src="assets/js/bootstrap-tooltip.js"></script>
	<script src="assets/js/bootstrap-popover.js"></script>
	<script src="assets/js/bootstrap-button.js"></script>
	<script src="assets/js/bootstrap-collapse.js"></script>
	<script src="assets/js/bootstrap-carousel.js"></script>
	<script src="assets/js/bootstrap-typeahead.js"></script>
	<script>
		!function($) {
			$(function() {
				$('#myCarousel').carousel()
				$('#myModal').modal(options)
				$('#myModalReg').modal(options)

			})
		}(window.jQuery)
	</script>
	<script>
		$(function() {
			$('#myTab a:last').tab('show');
		})
	</script>
	<script src="assets/js/holder.js"></script>

</body>
</html>


